<template>
    <el-row class="main-cont padd20">
        <el-col class="btn box box-pack-end" v-if="maxRole !='cmo'">
            <!-- <el-button class="reset-comfirm-btn practice" @click="showSj">引用</el-button> -->
        </el-col>
        <el-row :gutter="20" class="padd20 box box-pack-between" style="height: calc(100% - 40px);">
            <el-col :span="24" class="box box-tb">
                <el-col :span="24" v-if="list.length != 0">
                    <el-col :xs="4" :sm="6" :md="6" :lg="6" :xl="5" class="col-list cp minwith200"
                        v-for="(item, index) in list" :key="index" style="margin-bottom: 10px;"
                        @click.native="goCourse(item.id)">
                        <div class="grid-content bg-purple">
                            <el-image :src="item.img" fit="cover" class="img">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <div class="delete" v-if="maxRole == 'cmo'" @click.stop="handleDelete(item.id)">删除</div>
                           <!-- <el-col style="font-size: 10px;text-align: left;" v-if="item.sjtypename1">
								<span class="course-name">{{ item.title.substr(0, 7) }}</span>
                            </el-col> -->
                            <el-col class="tl tlt">
                                <span class="course-name">{{ item.title.substr(0, 7) }}</span>
                                <span class="sjtype" v-if="item.type == '0'">生活</span>
                                <span class="sjtype" v-if="item.type == '1'">生产</span>
                                <span class="sjtype" v-if="item.type == '2'">服务</span>
                                <span class="sjtype" v-if="item.type == '3'">其他</span>
                            </el-col>
                            <el-col class="tl tlword" style="padding: 0 30px 0 25px;font-size: 12px;height: 37px;">
                                {{ item.ldmb }}
                            </el-col>
							<!-- <e-col class="tl" v-if="item.sjtypename1">
								{{`${item.sjtypename1} / ${item.sjtypename2}`}}
							</e-col> -->
                        </div>
                    </el-col>
                </el-col>
                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无公共实践课程" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>
                <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                    :total="ipagination.total" :current-page="ipagination.current" :page-size="ipagination.rows"
                    hide-on-single-page></el-pagination>
            </el-col>
        </el-row>
        <select-sj :dialogVisible="showSjlist" @clickClose="closecouslist()" title="选择实践" ref="clist"
            @saveCous="saveCous">
        </select-sj>
    </el-row>
</template>

<script>
    import {
        getActionV3
    } from '@/http/axios.js'
    import selectSj from './components/ldsj.vue'
    export default {
        components: {
            selectSj
        },
        data() {
            return {
                maxRole: this.$store.state.maxRole,
                showSjlist: false,
                schoolid: this.$store.state.schoolId,
                url: {
                    list: '/ldsj/public'
                },
                list: [],
                ipagination: {
                    total: 0,
                    rows: 8,
                    page: 1,
                    current: 1
                }
            };
        },
        created() {
            this.getPublicCourse()
        },
        methods: {
            // 引用实践 添加弹框
            showSj() {
                this.$refs.clist.getCourseList();
                this.showSjlist = true;
            },
            //关闭添加实践弹框
            closecouslist() {
                this.showSjlist = false;
            },
            //添加按钮
            saveCous(value) {
                this.$confirm('确定添加到实践任务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/yldsj/use', {
                        schoolid: this.schoolid,
                        sjids: value.toString()
                    }).then(res => {
                        console.log(res);
                        if (res.code == 0) {

                            this.getPublicCourse();
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {});
            },
            getPublicCourse() {
                let params = Object.assign({}, this.ipagination)
                params.type = ''
                params.name = ''

                let url = '/ldsj/public'
                getActionV3(url, params).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.list = res.data.records;
                        this.ipagination.total = res.data.total
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            //课程详情
            goCourse(sjid) {
                this.$router.push('/laborPracticeDetail')
                localStorage.setItem('ldsjId', sjid)
            },
            handleCurrentChange(val) {
                this.ipagination.page = val
                this.getPublicCourse()
            },
            //删除公共实践课程
            handleDelete(id) {
                let arr = []
                arr.push(id)
                this.$confirm('此操作将永久删除该实践, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.wyv3.deletePublicPractiseById({
                        id: arr.toString()
                    }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getPublicCourse()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    })
                }).catch();

            },
        }
    };
</script>

<style scoped lang="scss">
    .ym,
    .sf {
        width: 120px;
    }

    .sf {
        text-align: right;
    }

    /deep/.jy-team[data-v-580db919] {
        overflow-y: initial;
    }

    /deep/ .fofnk {
        width: 100%;
        padding-left: 12px;
        text-align: left;

        >.num {
            display: inline-block;
            font-size: 12px;
            width: 20px;
        }

        >.checkStyle {
            >.el-checkbox__input {
                padding-top: 27px;
            }
        }
    }

    /deep/.el-checkbox {
        margin-right: 0 !important;

        >.el-checkbox__input {
            padding-bottom: 30px !important;
        }
    }

    /deep/.el-checkbox__input {
        margin-bottom: 0 !important;
    }

    /deep/ .team::-webkit-scrollbar {
        height: 0 !important;
    }

    .main-cont {
        height: 100%;
    }

    .el-row {
        &:last-child {
            margin-bottom: 0;
        }
    }

    .col-list {
        border-radius: 12px;
    }

    .bg-purple {
        background-color: #fafbff;
        transition: .3s ease-in-out;
    }

    .bg-purple:hover {
        box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);
    }

    .el-plus {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 26px;
        background: linear-gradient(-13deg, #626BF1, #989BFA);
        border-radius: 16px;
        color: #fff;
        font-size: 26px;
        font-style: normal;
    }

    .border {
        background-color: #f8f9fc;
        color: #626BF1;
        border: 1px dotted #BEBDE6;
        min-width: 200px;
        border-radius: 12px;
        height: 240px;
        overflow: hidden;

        &:hover {
            border: 1px dotted #626bf1;
        }
    }

    .grid-content {
        position: relative;
        border-radius: 12px;
        overflow: hidden;

        &:hover {
            .delete {
                display: block;
            }
        }

        .img {
            width: 100%;
            height: 160px;
        }

        .tlt {
            display: flex;
            justify-content: space-between;
        }

        .course-name {
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
        }

        .createuser {
            // width: 40px;
            display: block;
            font-size: 14px;
        }

        .course-info {
            span {
                color: #888F9E;
            }
        }

    }

    .minwith200 {
        min-width: 210px;
    }

    .jy-team {
        position: relative;
        min-width: 260px;
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
        box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.4);

        .add-btn {
            color: #626BF1;
            font-weight: 600;
            width: 65px;
            display: flex;
            justify-content: space-between;

            >.el-icon-plus {
                font-weight: 600;
            }
        }

        .user-name {
            width: 140px;

            .es-width {
                text-align: left;
                width: 80px;
                overflow: hidden;
            }
        }

        .role {
            min-width: 110px;
            text-align: center;
        }
    }

    .sjtype {
        width: 34px;
        text-align: center;
        // padding: 4px 8px 4px 8px;
        // margin-left: 30px;
        height: 24px;
        line-height: 24px;
        background: #eaebf5;
        border-radius: 9px;
        color: #5e6266;
        font-size: 12px;
    }

    .ldmb {
        padding: 0 30px 20px 25px;
    }

    .tlword {
        word-break: break-all;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
    }

    .delete {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 20px;
        line-height: 20px;
        background-color: rgba(254, 0, 0, .7);
        color: #fff;
        border-radius: 3px;
        font-size: 14px;
    }
</style>
